import "../css/courseList.scss";
import Layout from "../components/layout";
import Dialog from "../components/dialog";
import Radio from "../components/radio";
import api from "../utils/api";

import Loading from "../components/loading";

const topBg1 = require("../images/top-bg1.png");
const checked = require("../images/checked.png");

const bottom1 = require("../images/bottom1.png");
const bottom2 = require("../images/bottom2.png");
const bottom3 = require("../images/bottom3.png");
const bottom4 = require("../images/bottom4.png");
const bottom5 = require("../images/bottom5.png");

// const openid = "olsJCwx-pWEkoeIn9Hk4dD8J6SnE";
const openid = getCookie("openid");

export default class List extends React.PureComponent{
	constructor(props){
		super(props);
		this.state = {
			show:false,
			currentChecked:0,
			discountList:[

			],
			courseList1:[
				{title:"T5秀",id:1,value:"T5秀"},
				{title:"THE ONE 数字钢琴课堂",id:2,value:"THEONE数字钢琴课堂"},
				{title:"WOW Baby Sensory 国际早教中心",id:3,value:"WOWBabySensory国际早教中心"},
				{title:"阿尔法数学",id:4,value:"阿尔法数学"},
				{title:"九星围棋",id:5,value:"九星围棋"},
			],
			courseList2:[
				{title:"舞工坊",id:6,value:"舞工坊"},
				{title:"希果美术",id:7,value:"希果美术"},
				{title:"5+2儿童创意中心",id:8,value:"5+2儿童创意中心"},
				{title:"晔华眼科",id:9,value:"晔华眼科"},
			],
			list:[],
			showDiscount:false,
			showBuy:false,
			currentSelectItem:{},
			currentTitleIndex:1,
			vipList:[],
			discountState:1,//优惠状态，1表示5折，2表示9折
			currentDiscount:{},
			vipIndex:0,
			isLoading:false,
			isAllBuyClass:true,
		};
		this.closeShowBuy = this.closeShowBuy.bind(this);
		this.showDiscountDialog = this.showDiscountDialog.bind(this);
		this.closeDiscountDialog = this.closeDiscountDialog.bind(this);
		this.sureBuy = this.sureBuy.bind(this);
		this.optionChange = this.optionChange.bind(this);
	}
	componentDidMount(){
		this.getCourseList();
		this.getUserInfo();
	}
	getUserInfo(){
		ajax(api.findApply,{openid},"post").then((result)=>{
			if(result.status === 1){
				let isBuyClass = 1;
				let flag = false;
				if(result.datas && result.datas.length  && result.datas[0].isBuyClass){
					isBuyClass = 2;
				}
				if(result.datas && result.datas.length){
					let flag1 = result.datas.find((item)=>{
						return !item.isBuyClass
					});

					flag = !!flag1;
				}
				this.setState({
					vipList:result.datas || [],
					discountState:isBuyClass,
					isAllBuyClass:flag,
				})
			}
		})
	}
	getDiscount(){
		ajax(api.findDiscount,{openid},"post").then((result)=>{
			if(result.status === 1){
				let obj = {};
				if(result.datas && result.datas.length){
					obj = result.datas[0];
				}
				this.setState({
					discountList:result.datas || [],
					currentDiscount:obj
				})
			}

		});
	}
	getCourseList(orgName = "T5秀"){
		ajax(api.getCourseList,{orgName:orgName},"post").then((result)=>{
			if(result.status === 1){
				this.setState({
					list:result.datas || []
				})
			}
		})
	}
	selectDiscount(index,item){
		this.setState({
			currentChecked:index,
			currentDiscount:item,
		})
	}
	goBuy(item){
		let {vipList} = this.state;
		if(!vipList.length){
			showMsg("请先购买会员卡");
			return;
		}

		this.getUserInfo();
		this.getDiscount();
		this.setState({
			currentSelectItem:item,
			showBuy:true,
		})
	}
	closeShowBuy(){
		this.setState({
			showBuy:false,
		})
	}
	showDiscountDialog(){
		this.setState({
			showDiscount:true,
		})
	}
	closeDiscountDialog(){
		this.setState({
			showDiscount:false,
		})
	}
	selectTitle(item){
		this.setState({
			currentTitleIndex:item.id,
		});
		this.getCourseList(item.value);

	}

	expand(index){
		let {list} = this.state;
		list[index].expand = !list[index].expand;
		this.setState({
			list:[].concat(list)
		})
	}
	sureBuy(){
		let _this = this;
		let {vipList,currentSelectItem,currentDiscount,discountState} = this.state;
		let vipIndex = this.refs.vipSelect.value;
		let request = {
			prizeId:discountState === 1?"":currentDiscount.id,
			type:1,
			courseId:currentSelectItem.id,
			courseName:currentSelectItem.name,
			orgName:currentSelectItem.orgName,
			vipId:vipList[vipIndex].vipId,
			userName:vipList[vipIndex].userName,
			orderDescription:currentSelectItem.name,
			name:currentSelectItem.name,
			openid
		};
		ajax(
			api.addOrder,request,"post",()=>{this.setState({isLoading:true})}
		).then((result)=>{
			this.setState({isLoading:false});
			if(result.status === 1){
				let obj = result.datas.datas;
				wx.ready(function(res){
					wx.chooseWXPay({
						appId:obj.appid,
						timestamp: obj.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
						nonceStr: obj.nonce_str, // 支付签名随机串，不长于 32 位
						package: `prepay_id=${obj.prepay_id}`, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
						signType: 'MD5', // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
						paySign: obj.paySign, // 支付签名
						success: function (res) {  // 支付成功后的回调函数
							_this.setState({
								showBuy:false,
							})
						}
					});
				});
			}else{
				showMsg(result.message);
			}
		})
	}
	optionChange(e){
		let index = e.target.value;
		let {vipList} = this.state;
		let currentVipObj = vipList[index];
		console.log(currentVipObj)
		if(currentVipObj.isBuyClass){
			this.setState({
				discountState:2,
				vipIndex:index,
			})
		}else{
			this.setState({
				discountState:1,
				vipIndex:index,
			})
		}
	}
	getPrice(){
		let {currentSelectItem,discountState,currentDiscount} = this.state;
		let dom = "";
		let totalPrice = parseInt(currentSelectItem.totalPrice);
		let discount = currentDiscount.prizeName?currentDiscount.prizeName.substr(3,currentDiscount.prizeName.length):"";
		if(discountState === 1){
			dom =
				<div className="buy-dialog-price">
					{parseInt(currentSelectItem.totalPrice)+""}-{(parseInt(currentSelectItem.totalPrice)/2)+""}=
					<span className="color-red">{(totalPrice-(totalPrice)/2)}元</span>
				</div>
		}else{
			dom =
				<div className="buy-dialog-price">
					{totalPrice}{discount?`-${discount}`:""}-{totalPrice*0.1}=
					<span className="color-red">{parseInt((totalPrice-discount))-(totalPrice*0.1)}元</span>
				</div>
		}
		return dom
	}
	render(){
		let {discountList,currentChecked,list,showBuy,
			showDiscount,currentSelectItem,courseList1,currentDiscount,vipIndex,
			courseList2,currentTitleIndex,vipList,discountState,isLoading,isAllBuyClass} = this.state;
		let courseTime = currentSelectItem.courseTime || "";
		let courseArr = courseTime && courseTime.split("，");

		return(
			<Layout {...this.props} active = "buyCourse">
				<div className="course-list">
					<div className="course-list-container">
						<img className="top-bg1" src={topBg1} alt=""/>
						<div className="course-list-title">
							<div className="class-list-title1" >
								{
									courseList1.map((item,index)=>{
										return(
											<div
												key = {index}
												onClick = {this.selectTitle.bind(this,item)}
												className={`class-list-btn class-list-btn1   btn-color${item.id} ${item.id === currentTitleIndex?"btn-active":""}`}>
												<div className="bold text-center font-10">{item.title}</div>
											</div>
										)
									})
								}
							</div>

							<div className="class-list-title2-container">
								<div className="class-list-title2">
									{
										courseList2.map((item,index)=>{
											return(
												<div
													key = {index}
													onClick = {this.selectTitle.bind(this,item)}
													className={`class-list-btn class-list-btn2  btn-color${item.id} ${item.id === currentTitleIndex?"btn-active":""}`}>
													<div className="bold text-center">{item.title}</div>
													<img className="class-list-bottom-img" src={require(`../images/bottom${index+1}.png`)} alt=""/>
												</div>
											)
										})
									}
								</div>
							</div>
						</div>
						{/* <div className="course_name_content">
							<div className="course_name_content_main">
								<div className="course_name_content_left">
									点击选择学校
									<div className="course_icon"></div>
								</div>
								<div className="course_name_content_right">
									<input type="text" placehold="搜索课程"/>
									<div className="course_icon"></div>
								</div>
							</div>
							<div className="course_name_lists">
								<div className="course_name_lists_content">
									<div className="course_name_list">
										aaa
									</div>
									<div className="course_name_list">
										aaa
									</div>
									<div className="course_name_list">
										aaa
									</div>
									<div className="course_name_list">
										aaa
									</div>
									<div className="course_name_list">
										aaa
									</div>
									<div className="course_name_list">
										aaa
									</div>
									<div className="course_name_list">
										aaa
									</div>
									<div className="course_name_list">
										aaa
									</div>
								</div>
								<img src={require('../images/bg6.png')} alt=""/>
							</div>
						</div> */}
						<div className="course-list-box">
							<div className="course-list-header">
								<div className="course-list-col1">课程</div>
								<div className="course-list-col1">
									教学对象
								</div>
								<div className="course-list-col1">
									课程介绍
								</div>
								<div className="course-list-col1">
									年费价格
								</div>
							</div>
							<div className="course-list-item-wrapper">
								{
									list.map((item,index)=>{
										return(
											<div key = {index} className="course-list-outer-item">
												<div className="course-list-item">
													<div className={`course-list-col1  color-333 ${!item.expand?"text-over":""}`}>
														{item.name}
													</div>
													<div className="course-list-col1  color-333">
														{item.courseObject || "无"}
													</div>
													<div className={`course-list-col1  color-333 ${!item.expand?"text-over":""}`}>
														{item.courseIntroduction}
													</div>

													<div className="course-list-col1  color-333">
														<div className="course-list-price">{item.totalPrice}</div>
													</div>
												</div>
												<div className = "course-list-cell">
													<div className="course-list-more">
														<div onClick = {this.expand.bind(this,index)} className={!item.expand?"expand-more":"expand-more pack-up"}/>
														<div  onClick = {this.goBuy.bind(this,item)}
														      className="course-list-buy-box">
															<span className="color-fff">{isAllBuyClass?5:9}折抢购</span>
															<div className="buy-circle">
																<div className="buy-more"/>
															</div>
														</div>
													</div>
												</div>
											</div>
										)
									})
								}
							</div>
						</div>
					</div>
				</div>
				<Dialog onClose = {this.closeShowBuy} isShow = {showBuy}>
					<div className="buy-dialog-content">
						<div className="buy-dialog-organ">
							{currentSelectItem.orgName}
						</div>
						<div className="buy-dialog-name">
							{currentSelectItem.name}
						</div>
						<div className="buy-dialog-select-row">
							<select onChange = {this.optionChange} value = {vipIndex} ref = "vipSelect" >
								{
									vipList.map((item,index)=>{
										return(
											<option  key = {index} value={index}>{item.userName}</option>
										)
									})
								}
							</select>
						</div>
						{
							discountState === 1 && currentDiscount.prizeName?
								<div className="buy-disabled-row">
									<div>
										<span className="color-999">{currentDiscount && currentDiscount.prizeName}</span>
										<span> ></span>
									</div>
									优惠券不参与首单5折优惠
								</div>
								:
								<div onClick = {this.showDiscountDialog} className="buy-dialog-select-row">
									{
										currentDiscount.prizeName &&
										<div>
											<span className="color-red">{currentDiscount && currentDiscount.prizeName}</span>
											<span> ></span>
										</div>
									}

								</div>
						}
						<div className="buy-dialog-select-row">
							{
								discountState === 1?
									<div>
										<span>首单</span>
										<span className="color-red">5折</span>
									</div>
									:
									<div>
										<span>终身</span>
										<span className="color-red">9折</span>
									</div>
							}

						</div>
						<div className="buy-dialog-info">
							{
								!currentSelectItem.sort &&
								<div className="buy-dialog-info-row">
									<div>
										<span className="color-red">{parseInt(currentSelectItem.salePrice)}元</span>
										<span className="color-333">/课时</span>
									</div>
									{
										courseArr &&
										<div>
											<span className="color-333">{courseArr[0]}</span>
										</div>
									}

								</div>
							}
							{
								!currentSelectItem.sort &&
								<div className="buy-dialog-info-row">
									<div>
										<span className="color-red">{parseInt(currentSelectItem.totalPrice)}元</span>
										<span className="color-333">/年</span>
									</div>
									{
										courseArr &&
										<div className="item-center">
											<span className="color-333">{courseArr[1]}</span>
											<img className="buy-dialog-checked-img" src={checked} alt=""/>
										</div>
									}

								</div>
							}
							{
								currentSelectItem.sort &&
								<div className="buy-dialog-info-row">
									<div>
										<span className="color-red">{currentSelectItem.totalPrice}</span>
									</div>
								</div>
							}

							{
								this.getPrice()
							}

						</div>
						<button className="buy-dialog-btn" onClick = {this.sureBuy}>结算</button>
					</div>
				</Dialog>
				<Dialog isTitle = {false} onClose = {this.closeDiscountDialog} isShow = {showDiscount}>
					<div className="buy-dialog-content">
						<div className="buy-dialog-discount-title">
							{discountList.length}张优惠券可用
						</div>
						<div className="buy-dialog-discount">
							{
								discountList.map((item,index)=>{
									return(
										<div onClick = {this.selectDiscount.bind(this,index,item)} className="buy-dialog-discount-bg" key = {index}>
											<div><span className="color-red">{item.prizeName}元</span></div>
											<div>8月15日后过期</div>
											<div className="discount-radio">
												<Radio checked = {index === currentChecked ?true:false}/>
											</div>
										</div>
									)
								})
							}
						</div>
						<button className="buy-dialog-btn" onClick={this.closeDiscountDialog}>确定</button>
					</div>
				</Dialog>

				<Loading isShow = {isLoading}/>
			</Layout>

		)
	}
}